<template>
  <component
    :is="tag"
    :style="styleProps"
    class="l-text-component remove-position"
    @click="handleClick"
  >
    {{ text }}
  </component>
</template>
<!-- 
<script lang="ts">
import { defineComponent, defineProps, withDefaults } from "vue";
import {
  transformToComponentProps,
  transformToComponentPropsOld,
  textDefaultProps,
  textStylePropNames,
} from "@/defaultProps";
import useComponentCommon from "@/hooks/useComponentCommon";
import { TextComponentProps } from "@/defaultProps";
const defaultPropsOld = transformToComponentPropsOld(textDefaultProps);
const defaultProps = transformToComponentProps(textDefaultProps);

export default {
  name: "l-text",
};
</script> -->

<script lang="ts" setup name="l-text">
import { defineProps, withDefaults } from "vue";
import { textDefaultProps, textStylePropNames } from "@/defaultProps";
import { useStylePick, useComponentClick } from "@/hooks/useComponentCommon";
import { TextComponentProps, isEditing } from "@/defaultProps";
// 这种写法还需要定义上面的 <script>
// const props = defineProps({
//   tag: {
//     type: String,
//     default: "div",
//   },
//   ...defaultPropsOld,
// });

type LTextType = Partial<TextComponentProps> & {
  tag?: string;
} & Partial<isEditing>;
const props = withDefaults(defineProps<LTextType>(), {
  tag: "div",
  ...textDefaultProps,
  isEditing: true,
});
// console.log('ltext',JSON.stringify(props));

const styleProps = useStylePick(props);
const handleClick = useComponentClick(props);
</script>

<style scoped lang="css">
h2.l-text-component,
p.l-text-component {
  margin-bottom: 0;
}

button.l-text-component {
  padding: 5px 10px;
  cursor: pointer;
  display: block;
}

.l-text-component {
  box-sizing: border-box;
  white-space: pre-wrap;
  /* position: relative !important; */
}
</style>
